<template>
	<view>
		<u-navbar back-text="" 
		:leftIconColor="tksetting.titlecolor" 
		:bgColor="tksetting.color" 
		:titleStyle="{color:tksetting.titlecolor}" 
		:title="title"  
		:autoBack="true"  
		:placeholder="true">
		</u-navbar>
		
		<view style="padding: 20rpx;">当前积分:{{jifen}}</view>
		<u-gap height="10" bg-color="#eaeaea"></u-gap>
		<view class="content">
		<u--form
			labelPosition="top"
			:model="model1"
			labelWidth	="200"
			:labelStyle="labelStyle"
			ref="form1"
		>
		
		    <u-form-item
		    	label="请上传一张清晰的头像照"
		    	prop="pic"
		    	borderBottom
		    	ref="item1"
		    	:required="true"
		    >
		    	<u-upload
		    	    :fileList="fileList1"
		    	    @afterRead="afterRead"
		    	    @delete="deletePic"
		    	    name="1"
		    	    :maxCount="1"
		    	  ></u-upload>
		    </u-form-item>
			
				<u-form-item
					label="请选择邮寄地址"
					prop="adds"
					borderBottom
					ref="item1"
					:required="true"
				>
				<u--input
					v-model="model1.adds"
					border="none"
					:readonly="true"
					placeholder="请选择邮寄地址"
				></u--input>
				
				<u-button
				    @click="adds"
					slot="right"
					text="选择地址"
					type="success"
					size="small"
				></u-button>
				
			</u-form-item>
		
			
	
		
		</u--form>
		
		<u-button
			type="primary"
			text="提交"
			customStyle="margin-top: 50px"
			:color="tksetting.color"
			@click="submit"
		></u-button>
		</view>
	</view>
</template>
<script>
import {toast, clearStorageSync, setStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'
import { mapState } from 'vuex';
import BASE_URL from '@/api/env.js' //引入接口共用地址
export default {
	data() {
		return {
			title:'3D挂件打印',
			jifen:0,
			jf:0,
			labelStyle:{"font-weight":600},
			fileList1: [],
			model1:{
				sbid:'',
				pic:'',
				adds:'',
			},
			rules: {
				'pic': {
					type: 'string',
					required: true,
					message: '请上传您的头像',
					trigger: ['blur', 'change']
				},
				'adds': {
					type: 'string',
					required: true,
					message: '请选择邮寄地址',
					trigger: ['blur']
				}
			}
		}
	},
	onLoad(op) {
		
		try{
			const params = JSON.parse(decodeURIComponent(op.data));
			this.model1.sbid=params.id;
			this.jf=params.jf;
			console.log(params)
		}catch(e){}
		
		
		uni.$on('upadds',this.upadds);
	},
	onUnload() {
		uni.$off('upadds',this.upadds);
	},
	onShow() {
		this.init();
	},
	onReady() {
		this.$refs.form1.setRules(this.rules)
	},
	computed: {
		...mapState(['tksetting'])
	},
	methods: {
		init(){
			this.$api.baseInfo().then(res => {
				if(res.code==0){
					this.jifen=res.data.jifen
					if(parseInt(this.jf)>parseInt(res.data.jifen)){
						uni.showModal({
							title: '系统提示',
							showCancel:false,
							content: '积分不够无法兑换,请多多参与活动获取积分!',
							success(res) {
								if (res.confirm) {
								  uni.navigateBack();
								}
							}
						});
					}
				}
			})
		},
		upadds(newval){
			//console.log(newval);
			this.model1.adds='收件人:'+newval.name+' 电话:'+newval.phone+' 地址:'+newval.adds;
			//this.pro.adds=newval.adds;
		},
		adds(e){
			//地址列表
		    useRouter('/pages/user/addlist/addlist',{types:2})
		},
		async submit() {
			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			const _this=this;
			console.log(this.model1)
			try{
				this.model1.pic=this.fileList1[0].url;
			}catch(e){}
			
			const yz=await  _this.$refs.form1.validate().then(res => {
				return true;
			}).catch(errors => {
				uni.$u.toast('请将注册信息输入完整');
				return false
			})
			if(yz){
				
				const ress= await  _this.$api.print3D(_this.model1);
				if(ress.code==0){
					uni.showModal({
						title: '系统提示',
						confirmText:'查看奖品',
						cancelText:'返回',
						content: '兑换成功!',
						success(res) {
							if (res.confirm) {
								useRouter('/pages/user/myduijiang')
							}else{
								uni.navigateBack();
							}
						}
					});
				}else{
					uni.$u.toast(ress.msg)
				}
			}	
			
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
			this.model1.pic='';
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: "uploading",
					message: "上传中",
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: "success",
						message: "",
						url: result,
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			let _this=this;
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url:BASE_URL + '/upload/upimg', // 仅为示例，非真实的接口地址
					filePath: url,
					name: "file",
					header:{
						token:getStorageSync('token')
					},
					success: (res) => {
						//console.log(res)
						let shopewm=JSON.parse(res.data).data;
						resolve(shopewm)
					},
				});
			});
		},
	}
}
</script>
<style lang="scss" scoped>
	.content{padding: 40rpx;}
</style>